<template>
  <div class="login">
    <!--账号密码登录--->
    <van-nav-bar
      title="登录"
    />
    <van-form @submit="onSubmit" class="To-login" v-show="ToLogin">
      <van-field
        class="login-input"
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        class="login-input"
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px" class="login-button">
        <van-button round block type="info" color="#7232dd" @click="register">注册</van-button>
        <van-button round block type="info" native-type="submit"
          >登录</van-button
        >
      </div>
    </van-form>
    <!--手机登录-->
    <div
      class="phoneVerification-code-login"
      v-show="phoneVerificationCodeLogin"
    >
      <van-cell-group>
        <!-- <van-field
          v-model="username"
          error
          required
          label="用户名"
          placeholder="请输入用户名"
        /> -->
        <van-field
          v-model="phone"
          required
          label="手机号"
          placeholder="请输入手机号"
        />
      </van-cell-group>
      <van-field
        v-model="sms"
        center
        clearable
        label="短信验证码"
        placeholder="请输入短信验证码"
      >
        <template #button>
          <van-button size="small" type="primary" @click="sendVerificationCode"
            >发送验证码</van-button
          >
        </template>
      </van-field>
      <div style="margin: 16px" class="login-button">
        <van-button round block type="info" color="#7232dd" @click="register">注册</van-button>
        <van-button round block type="info" native-type="submit"
          >登录</van-button
        >
      </div>
    </div>

    <van-button @click="caseLogin" type="primary" size="mini" color="orange" style="float:right"
      >切换登录方式</van-button
    >
  </div>
</template>

<script>
  import { areaList } from "@vant/area-data";
  import { Notify } from "vant";
  import { doLogin } from "../../api/loginApi";
  var verificationCode = Math.ceil(Math.random() * 100000);
  export default {
    mounted() {
    
      
    },
    data() {
      return {
        username: "",
        password: "",
        phone: "", //手机号
        sms: "", //验证码
        ToLogin: true, //账号密码登录显示
        phoneVerificationCodeLogin: false, //手机验证码登录隐藏

        // 选择地区
        show: false,
        value: "",
        showArea: false,
        areaList: areaList, // 数据格式见 Area 组件文档
      };
    },
    methods: {
    
      onSubmit(values) {
      
        // console.log(111);
        // console.log("submit", values);
        doLogin({ username: this.username, password: this.password }).then(
          (res) => {
            if (res.code == 1) {
              // 登陆成功，把返回的token写入到本地存储
              // console.log(res.data);
              window.localStorage.setItem("authToken", res.token);
              // 提示登陆成功
              this.$toast.success('登录成功！')
              // console.log(this.username)
              // VueRouter.prototype.b={username:this.username}
              let tkuserName = window.localStorage.setItem('username',this.username)
              // 判断当前路由中是否有重定向参数，如有则重定向到此路由
              if (this.$route.query.redirect) {
                // console.log(111);
                this.$router.push({ path: this.$route.query.redirect });
              } else {
                // console.log(222);
                // 跳转到首页
                this.$router.push({ path: "/botnav" });
              }
            } else {
                
            }
          }
        );
      },
      caseLogin() {
        this.phoneVerificationCodeLogin = !this.phoneVerificationCodeLogin;
        this.ToLogin = !this.ToLogin;
      },
      onConfirm(values) {
        this.value = values
          .filter((item) => !!item)
          .map((item) => item.name)
          .join("/");
        this.showArea = false;
      },
      sendVerificationCode() {
        return Notify({
          message: "验证码:" + verificationCode,
          color: "#ad0000",
          background: "#ffe1e1",
          duration: 10000,
        });
      },
      register(){
        // console.log(111);
        this.$router.push({path:'/register'})
      }
    },
  };
</script>

<style lang="less" scoped>
.login-button {
  display: flex;
}
.van-field {
  opacity: 0.5;
}
.login {
  background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201611%2F17%2F20161117175603_scyUK.thumb.400_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643629209&t=a13c9ab200e77fc00f3d6a464f3bb6ac");
  height: 100vh;
}
.phoneVerification-code-login {
  background-color: skyblue;
}
.van-form{
  background-color: #F7F7F7;
}
.phoneVerification-code-login{
  background-color: #F7F7F7;
}
</style>
